<template>
    <div class="margin--top">
        <div class="seachInput input-form">
            
                <div class="inputcover">
                    <i class="searchLogo"></i>
                    <input type="text" @input="changeHolder()" @keyup.enter="search" v-model="text" placeholder="搜索歌曲、歌手、专辑" >
                    <div class="closeBtn" v-if="showCloseBtn" @click="deleteAll"><i></i></div>
                </div>
            
            <div class="searchSection-box" v-show="text==''">
                <div class="hotList">
                    <h3 class="title">热门搜索</h3>
                    <ul>
                        <li v-for="(item,index) in hotKeyWord" :key="index" class="keyword"><a href="#" @click="clickChangeText(index)">{{item.first}}</a></li>
                    </ul>
                </div>
            </div>
            <div class="searchResult" v-show="text!=''&&searchhide">
                <h3 class="skeyword">搜索"{{text}}"</h3>
                <ul>
                    <li class="item" v-for="(searchItem,index) in searchSong" :key="searchItem.id" @click="clickChangeText(index)">
                        <i class="u-svg-search"></i>
                        <span class="searchkeyw">{{searchItem.name}}</span>
                    </li>
                </ul>
            </div> 
            <music v-if="onEnter" v-bind="item" v-for="item in SearchAll" :key="item.id"></music>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import api from '@/api/index.js'
import music from '@/components/music-T'
export default {
    components:{
        music
    },
    data(){
        return {
            holder:"搜索歌曲、歌手、专辑",
            text:"",
            hotKeyWord:[],
            searchAdvice:[],
            searchSong:[],  //歌曲建议
            showCloseBtn:false, //删除按钮
            onEnter:false,     //按下enter键，显示搜索的音乐
            SearchAll:[],   //查询的音乐结果，
            searchhide:true

        }
    },
       methods:{
           search(){
            console.log(this.searchhide)
            this.searchhide=false;
            console.log(this.searchhide)
            console.log(234)
            axios.get(api.search,{
                params:{
                    keywords:this.text
                }
            })
            .then((res)=>{
                console.log(res)
                this.SearchAll=res.data.result.songs;
                this.onEnter=true;
            })
           },
           deleteAll(){
               this.text="";
               this.showCloseBtn=false;
               this.onEnter=false;
           },
           changeHolder(){
               if(this.text.length==0){
                   this.holder="搜索歌曲、歌手、专辑";
                   this.showCloseBtn=false;
                   this.onEnter=false;
               }
               else{
                   this.holder="";
                   this.showCloseBtn=true;
                   this.searchhide=true;  
                   console.log(this.$refs)
                //    this.$refs.box1.display="none"   
               }
               this.getSearchSong();
               
           },
        //    搜索热词数据
           getKeywordData(){
               
               axios.get(api.hotKeyword)
               .then((res)=>{
                   this.hotKeyWord=res.data.result.hots;
                   console.log(this.hotKeyWord)
               })
           },
        //    搜索歌曲建议
           async getSearchSong(){
               if(this.text!=""){
                    axios.get(api.searchAdvice,{
                        params:{
                            keywords:this.text
                        }
                    })
                    .then((res)=>{
                        console.log(res);
                        this.searchSong=(res.data.result.songs).splice(0,5);
                        console.log(this.searchSong);
                    })
               }
           },
           clickChangeText(index){
               this.holder="",
               this.text=this.hotKeyWord[index].first;
               this.search();
               this.showCloseBtn=true;

               console.log(this)
           }
       },
       mounted(){
           this.getKeywordData();
           
       }
}
</script>
<style lang="scss" scoped>
.margin--top{
    padding-top: 105px;
    .input-form{
        padding: 15px 10px;
        // position: relative;
    }
    .seachInput input{
        width: 100%;
        height: 30px;
        line-height: 18px;
        background: transparent;
        font-size: 14px;
        color: #333;
        box-sizing: border-box;
        border: 0;
        outline: none;
    }
}
.inputcover{
    position: relative;
    width: 100%;
    height: 30px;
    padding: 0 30px;
    box-sizing: border-box;
    background: #ebecec;
    border-radius: 30px;
    .closeBtn{
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        line-height: 28px;
        text-align: center;
        i{
            display: inline-block;
            vertical-align: middle;
            background-position: 0 0;
            background-size: contain;
            background-repeat: no-repeat;
            width: 14px;
            height: 14px;
            background-image: url();    
        }
    }
}
.searchLogo{
    position: absolute;
    left: 0;
    top: 9px;
    margin: 0 8px;
    vertical-align: middle;
    display: inline-block;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    background-image: url();
    
}
.holder{
    position: absolute;
    left: 30px;
    top: 5px;
    font-size: 14px;
    color: #c9c9c9;
    background: transparent;
    pointer-events: none;
    cursor: default;
}
.searchSection-box{
    .hotList{
        padding: 15px 10px 0;
    }
}
.title{
    font-size: 12px;
    line-height: 12px;
    color: #666;
}
ul{
        margin: 10px 0 7px;
}
.keyword{
    display: inline-block;
    height: 32px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 32px;
    color: #333;
    position: relative;
}
.keyword::after{
    content: "";
    border-width: 1px;
    border-color: #d3d4da;
    border-radius: 32px;
    position: absolute;
    z-index: 2;
    content: "";
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(211, 212, 218);
}
.searchResult{
    margin: 0 auto;
}
.skeyword{
    height: 50px;
    margin-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    line-height: 50px;
    color: #507daf;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    font-weight: 400;
    position: relative;
}
.skeyword::after{
    content: "";
    position: absolute;
    z-index: 2;
    content: "";
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    border-bottom: 1px solid rgba(0,0,0,.1);
    border-top: 1px solid rgba(0,0,0,.1);
}
.item{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 45px;
    padding-left: 10px;
}
.u-svg-search{
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    background-image: url();
    flex: 0 0 auto;
    margin-right: 7px;
}
.searchkeyw{
    display: inline-block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 1%;
    padding-right: 10px;
    font-size: 15px;
    line-height: 45px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

</style>
